<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <!-- Important: cache busting for index.html -->
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />

    <title>Alfresco Content App</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/png" href="assets/favicon-96x96.png" sizes="96x96" />

    <style>
      @keyframes bouncing-loader {
        from {
          opacity: 1;
          transform: translateY(0);
        }
        to {
          opacity: 0.1;
          transform: translateY(-1rem);
        }
      }
      .bouncing-loader {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 50%;
      }
      .bouncing-loader > div {
        width: 1rem;
        height: 1rem;
        margin: 3rem 0.2rem;
        background: #8385aa;
        border-radius: 50%;
        animation: bouncing-loader 0.6s infinite alternate;
      }
      .bouncing-loader > div:nth-child(2) {
        animation-delay: 0.2s;
      }
      .bouncing-loader > div:nth-child(3) {
        animation-delay: 0.4s;
      }
    </style>
  </head>
  <body>
    <main>
      <app-root>
        <div class="bouncing-loader">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </app-root>
    </main>
  </body>
</html>
